<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="videojs/video-js.min.css" rel="stylesheet">
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script src="videojs/video.min.js"></script>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
		<title>videojs</title>
	</head>

	<style>
		.hide {
			display: none;
		}
	</style>

	<body>
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">VIDEOJS</h1>
		</header>
		<div class="mui-content">
			<div class="video">
				<video id="player" class="video-js vjs-styles-defaults vjs-fluid" poster="http://vjs.zencdn.net/v/oceans.png">
					<source src="http://vjs.zencdn.net/v/oceans.mp4">
				</video>
			</div>
	</body>
	<script type="text/javascript">
		
		mui.plusReady(function() {
			// 视频播放时间
			var playTime = 0;
			// 是否提问过问题
			var isAsk = true;
			// 提问的时间(单位s)
			var askTime = 6;

			var player = videojs('player', {
				controls: true, //控制条：boolean
				controlBar: {
					playToggle: {
						replay: true
					},
					progressControl: false,
					currentTimeDisplay: true
				}
			}, function onPlayerReady() {
				// 修改this指向
				var vdthis = this;
				videojs.log('播放器已经准备好了!');

				//this.play();

				this.on('ended', function() {
					videojs.log('播放结束了!');
				});
				
				//播放之前先获取播放时间
				var time = localStorage.getItem("time");
				if(time){
					playTime = time ;
				}
				this.currentTime(playTime);
				
				// 判断是否需要回答问题
				if(playTime < askTime){
					// 若 播放的时间小于 被提问的时间,将已回答的状态设置为需要回答问题
					isAsk = false;
				}
				
				/**
				 * 监听事件更新
				 */
				this.on('timeupdate', function(e) {

					videojs.log(vdthis.currentTime())
					playTime = vdthis.currentTime();
					if(!isAsk && vdthis.currentTime() >= askTime) {
						vdthis.pause();
						alertQuestion();
					}
				})

			});

			function alertQuestion() {

				var q = '<div class="mui-input-row mui-radio mui-left"><label>A、 1</label><input name="radio" type="radio" value="1" checked></div>' +
					'<div class="mui-input-row mui-radio mui-left"><label>B、 2</label><input name="radio" type="radio" value="2"></div>' +
					'<div class="mui-input-row mui-radio mui-left"><label>C、 3</label><input name="radio" type="radio" value="3"></div>' +
					'<div class="mui-input-row mui-radio mui-left"><label>D、 4</label><input name="radio" type="radio" value="4"></div>'

				mui.alert(q, "1+1=?", '提交', function(e) {

					var ans = document.getElementsByName("radio");
					for(var i = 0; i < ans.length; i++) {
						if(ans[i].checked) {
							mui.toast(ans[i].value);

							//发送请求
							mui.get('https://www.easy-mock.com/mock/5c3f326d5b18bd3526d4b0a0/answer/answer', {
								answer: ans[i].value
							}, function(data) {
								//服务器返回响应							
								mui.toast(data.data.res);
								mui.closePopup();
								player.play();
								// 回答问题之后将状态设置为已回答
								isAsk = true;
							}, 'json');
						}
					}

				}, 'div');
			}
			
			// 返回记录播放时间
			var back = mui.back;
			mui.back = function(){
				// 弹出提示框
				mui.confirm("视频正在播放是否要退出?","提示",['取消','确认'],function(e){
					if (e.index == 1) {
						// 记录播放时间
						localStorage.setItem("time", playTime);
						//保存进度成功
						mui.toast("视频进度已保存");
						// 退出
						back();
                    }
                    // 什么都不做          
				},'div')

			}
		
		});
	</script>
</html>